<template>
    <div class="app-container">
        <div class="filter-container" ref="searchForm">
            <el-form :inline="true" :model="formData" class="search-form-inline" size="small">
                <el-form-item label="订单号">
                    <el-input v-model="formData.no"></el-input>
                </el-form-item>
                <el-form-item label="订单日期">
                    <el-date-picker
                        v-model="orderTime"
                        type="daterange"
                        value-format="timestamp"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="终端客户">
                    <el-input v-model="formData.user.name"></el-input>
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-cascader
                        v-model="areas"
                        :options="areaList"
                        change-on-select
                        @change="handleAreas"
                    >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="formData.orderStatus" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
                        <el-option
                            v-for="item in orderStatusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单类型">
                    <el-select v-model="formData.orderType" placeholder="请选择">
                        <el-option
                            v-for="item in enums.orderTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <elFormNumScope label="订单金额" startName="startAmount" endName="endAmount" :data="formData"></elFormNumScope>
                <el-button type="primary" size="small" @click="getList(1)">搜索</el-button>
            </el-form>
        </div>
        <div class="filter-container clearfix">
            <span class="order-msg">订单商品金额总计：{{(orderStatistics && orderStatistics.goodTotalAmount || '0')|Currency}}</span>
            <span class="order-msg">订单量总计（笔）：{{orderStatistics && orderStatistics.orderTotalCount || 0}} </span>
            <span class="order-msg">今日销售额：{{(orderStatistics && orderStatistics.todaySellAmount || 0)|Currency}}</span>
            <span class="order-msg"> 今日订单量（笔）：{{ orderStatistics && orderStatistics.todayOrderCount || 0}}</span>
            <el-tooltip class="item" effect="dark" content="订单订单" placement="right-start">
                <i class="el-icon-info"></i>
            </el-tooltip>
            <el-button size="small" class="fr">导出订单</el-button>
        </div>
        <div class="filter-container">
            <el-row>
                <el-col :span="8">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">普通订单</div>
                        <el-row>
                            <el-col :span="12" class="order-center">订单金额(笔)<br/>{{orderStatistics && orderStatistics.normalOrderCount || 0}}</el-col>
                            <el-col :span="12" class="order-center">订单实付金额<br/>{{orderStatistics && orderStatistics.normalPayAmount|Currency}}</el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <el-col :span="15" :offset="1">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">团购订单</div>
                        <el-row>
                            <el-col :span="6" class="order-center">订单量（笔）<br/>{{orderStatistics && orderStatistics.groupOrderCount || 0}}</el-col>
                            <el-col :span="6" class="order-center">订单实付金额<br/>{{orderStatistics && orderStatistics.groupPayAmount|Currency}}</el-col>
                            <el-col :span="6" class="order-center">实付定金<br/>{{orderStatistics && orderStatistics.groupDeposit|Currency}}</el-col>
                            <el-col :span="6" class="order-center">待付尾款<br/>{{orderStatistics && orderStatistics.groupBalance|Currency}}</el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        
        <elTable ref="t" :enterSearch="true" :formData="formData" @tableData="getList">
            <el-table-column label="订单号" prop="no" :show-overflow-tooltip="true" align="center">
                <template slot-scope="{row}">
                    <el-button type="text" @click="gotoDetails(row)">{{row.no}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="终端客户名称" prop="user.name" :show-overflow-tooltip="true" align="center">
                <template slot-scope="{row}">
                    <el-button type="text" @click="openClientInfo(row)">{{row.user.name}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="订单金额" prop="amount" :show-overflow-tooltip="true" align="center"></el-table-column>
            <el-table-column label="优惠" prop="discountAmount" :show-overflow-tooltip="true" align="center"></el-table-column>
            <el-table-column label="订单状态" prop="status" :show-overflow-tooltip="true" align="center"></el-table-column>
            <el-table-column label="下单时间" prop="depositTime" :show-overflow-tooltip="true" align="center">
                <template slot-scope="{row}">
                    <span>{{row.depositTime}}</span>
                </template>
            </el-table-column>
        </elTable>
        <!--终端客户弹框-->
        <dialogClient ref="dialogClientInfo"></dialogClient>
    </div>
</template>

<script>
    import elTable from "@/components/xForm/elTable"
    import elFormNumScope from '@/components/xForm/elFormNumScope'
    import apisOrders from '@/api/orders/orders'
    import apisArea from '@/api/common/area'
    import dialogClient from '@/views/accounts/accountLibrary/dialogClient'
    export default {
        name: 'index',
        components: { elTable, dialogClient, elFormNumScope },
        data() {
            return {
                formData: {
                    no: "",//订单号
                    startTime: null,//下单开始时间
                    endTime: null, //下单结束时间
                    user: {
                        name: ""//终端客户名称
                    },
                    orderStatus: [],
                    orderReceiver: {
                        area: '',//区
                        town: ''//街道
                    },
                    orderType: 1,//订单类型 1普通订单 2团购订单
                    startAmount: null,//订单金额起始
                    endAmount: null,//订单金额结束
                    currentPage: 1,//当前页
                    pageSize: 10,//每页条数
                },
                orderTime: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime()],//订单日期--中转
                areas: [],//省市区街道--中转
                orderStatusList: [],//订单状态list
                areaList: [],//省市区list
                orderStatistics: null,//订单总汇
            }
        },
        mounted() {
            this.orderStatusList = apisOrders.getOrderStatusList()
            apisArea.getForSelect().then(res=>{
                this.areaList = res.data.area
            })
        },
        methods: {
            /*获取表格数据*/
            getList(pageNo) {
                this.formData.startTime = this.orderTime[0]
                this.formData.endTime = this.orderTime[1]
                console.log(this.formData)
                this.formData.currentPage = pageNo || this.formData.currentPage
                apisOrders.getOrderList(this.formData).then(res=>{
                    this.orderStatistics = res.data.orderStatistics
                    this.$refs.t.loadData(res.data.pageInfo.list, res.data.pageInfo.total)
                })
            },
            /*打开 终端客户信息 view弹框*/
            openClientInfo(row) {
                this.$refs.dialogClientInfo.open(row)
            },
            /*跳转订单详情*/
            gotoDetails(row) {
                this.$router.push({ path: ['/orders/orderDetails', row.id, '订单详情：'+row.user.name].join('/') })
            },
            /*省市区----变动*/
            handleAreas(value) {
                this.formData.orderReceiver = {
                    province: value[0]?value[0]:'',//省
                    city: value[1]?value[1]:'',//市
                    area: value[2]?value[2]:'',//区
                    town: value[3]?value[3]:''//街道
                }
            }
        }
    }
</script>

<style scoped>
    .filter-container{font-size: 14px;}
    .order-msg{color: red;display: inline-block;margin-right: 10px;}
    .order-center{text-align: center}
</style>
